<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 background-color="#fff"
                 text-color="#606266"
                 active-text-color="#3E64BC">
            <el-menu-item index="aocSeat">AOC台席</el-menu-item>
            <!--通话记录只允许查询自己；录音记录隐藏不提供-->
            <el-menu-item index="notAocSeat">非AOC台席</el-menu-item>
        </el-menu>
        <div v-if="activeIndex === 'aocSeat'">
            <aocSeat></aocSeat>
        </div>
        <div v-if="activeIndex === 'notAocSeat'">
            <notAocSeat></notAocSeat>
        </div>
    </div>
</template>

<script>
  import ipRecordQuery from './auditQuery/ipRecordQuery.vue';
  import aocSeat from './seatQuery/aocSeat.vue';
  import notAocSeat from './seatQuery/notAocSeat.vue';

  export default {
    props: {//父组件数据
      FleetId: Number,
      userId: Number,
    },
    components: {
      notAocSeat, aocSeat
    },
    data() {
      return {
        activeName: 'aocSeat',
        activeIndex: 'aocSeat',
      };
    },
    mounted() {

    },
    methods: {
      handleSelect(val) {
        this.activeIndex = val;
      },
    },
  };
</script>

<style scoped>
    .elTalblTopStyle {
        font-size: 20px;
        font-family: SourceHanSansCN;
    }

    /deep/ .el-menu {
        height: unset !important;
    }

    /deep/ .el-menu-item {
        font-size: 25px;
        font-weight: bold;

    }

    /deep/ .el-menu-demo /deep/ .el-menu--horizontal /deep/ .el-menu /deep/ .is-active {
        background-color: #909399 !important;
    }

    /deep/ .el-menu-item:focus, /deep/ .el-menu-item:hover {
        background-color: #DADADA !important;
    }

    /deep/ .el-tabs__item {
        font-size: 25px;
    }

    /deep/ .el-form-item__label {
        font-size: 18px;
    }

    /deep/ .el-pagination__total {
        font-size: 18px;
    }

    /deep/ .el-form-item__label {
        font-size: 18px;
    }

    /deep/ .el-input__inner {
        font-size: 18px;
    }

    /deep/ .el-tree-node__label {
        font-size: 16px;
    }

    /deep/ .el-select-dropdown__item {
        font-size: 16px;
    }

    /deep/ .el-icon-close:before {
        font-size: 25px;
    }

    /*分页修改开始*/
    .el-pagination /deep/ .el-pagination__total {
        font-size: 20px;
        line-height: 60px;
    }

    .el-pagination /deep/ button /deep/ .el-icon .el-icon .el-icon-arrow-left {
        font-size: 50px;
        height: 60px;
        width: 40px;
    }

    /deep/ .el-pager li {
        margin-top: 15px;
        height: 60px;
        width: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    /deep/ .el-pagination.is-background .btn-prev, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination.is-background .btn-next, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination .btn-prev .el-icon {
        font-size: 40px;
    }

    /deep/ .el-pagination .btn-next .el-icon {
        font-size: 40px;
    }

    /*分页修改结束*/
</style>
